<template>
	<view>
		<view class="order-tab">
			<view class="order-li" :class="active == index?'active':''" v-for="(item,index) in orderTabList"
				:key="index" @click="clickTab(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list" v-if="orderList.length">
			<view class="order-li" v-for="(item,index) in orderList" :key="index">
				<view class="order-li-no">
					<view>订单号：{{ item.order.order_sn }}</view>
					<text v-if="active == 0">待支付</text>
					<text v-if="active == 1">待存鞋</text>
					<text v-if="active == 2">洗鞋中</text>
					<text v-if="active == 3">待取鞋</text>
					<text v-if="active == 4">已完成</text>
					<text v-if="active == 5">售后</text>
				</view>
				<view class="order-li-xq">
					<view class="order-li-xq-list" @click="goXq(items.id)" v-for="(items,indexs) in item.detail"
						:key="indexs">
						<image :src="'https://www.sdxiecheng.cn/'+items.goods_image" mode=""></image>
						<view class="order-li-xq-list-r">
							<view class="title">{{ items.goods_title }}</view>
							<view class="des u-line-2">
								{{ items.goods_describle }}
							</view>
							<view class="price flex_sb">
								<view class="price_num">
									X1
								</view>
								<view class="">
									¥{{items.original_price}}
									<text style="margin-left: 20rpx;"
										v-if="item.member_price">会员价：¥{{ item.member_price }}</text>
								</view>
							</view>
						</view>
						<view class="button-box">
							<button class="u-reset-button" @click.stop="goXq(items.id)">查看详情</button>
							<button class="u-reset-button btn1" v-if="active == 1"
								@click.stop="openGuiMen(items.id,'cun',1)">打开柜门</button>
							<button class="u-reset-button btn1" v-if="active == 3"
								@click.stop="openGuiMen(items.id,'qu',1)">打开柜门</button>
							
							<button class="u-reset-button btn1" v-if="active == 2"
								@click.stop="openGuiMen(items.id,'cun',2)">再次开门</button>
							<button class="u-reset-button btn1" v-if="active == 4"
								@click.stop="openGuiMen(items.id,'qu',2)">再次开门</button>
						</view>

					</view>
				</view>
				<view class="order-bottom" v-if="active == 0 || active == 1 ">
					<button class="u-reset-button" v-if="active == 0" @click="isCancel(item.order.id)">取消订单</button>
					<!-- <button class="u-reset-button" @click="goXq(item.id)">查看详情</button> -->
					<button class="u-reset-button btn1" v-if="active == 0"
						@click="nowPay(item.order.id,item.order.total_fee)">立即支付</button>
					<button class="u-reset-button" v-if="active == 1" @click="refund(item.order.id)">退款</button>
					<!-- <button class="u-reset-button btn1" v-if="active == 1" @click="openGuiMen(item.id,'cun')">打开柜门</button>
					<button class="u-reset-button btn1" v-if="active == 3" @click="openGuiMen(item.id,'qu')">打开柜门</button> -->

				</view>
			</view>
		</view>
		<view v-else style="margin-top: 20vh;">
			<u-empty mode="order" icon="https://cdn.uviewui.com/uview/empty/car.png" text="订单为空"></u-empty>
		</view>


		<!-- 取消订单 -->
		<u-modal v-model="guiziShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
			:confirm-style="confirmStyle" @confirm="isOpenGuiZi"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}">
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
		 		font-size: 28rpx;
		 		margin-bottom: 50rpx;
		 		margin-top: 49rpx;
		 		line-height: 45rpx;
		 		">
					<text>
						打开柜门
					</text>
					<text>
						请确保本人在柜子前面
					</text>
				</view>
			</view>
		</u-modal>
		<!-- 柜子打开成功 -->
		<u-modal v-model="guiziChengGongShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10"
			:confirm-style="confirmStyle" confirm-text="完成" @confirm="openGuiMenChengGong()"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}">
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
		 		font-size: 28rpx;
		 		margin-bottom: 50rpx;
		 		margin-top: 49rpx;
		 		line-height: 45rpx;" v-if="openType == 'cun'">
					<text style="color: #FF9A33;">
						{{ num }} 号
					</text>
					<text>
						柜门已打开，请存鞋
					</text>
				</view>
			</view>
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;" v-if="openType == 'qu'">
					<text style="color: #FF9A33;">
						{{ num }} 号
					</text>
					<text>
						柜门已打开，请取鞋
					</text>
				</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				currentPage: 1,
				last_page: 2,

				orderList: [],
				num: 0,
				guiziShow: false,
				guiziChengGongShow: false,
				openType: '',
				confirmStyle: {
					'borderLeft': '1px solid #EEEEEE'
				},
				order_id: 0,
				orderTabList: [{
						name: '待支付'
					},
					{
						name: '待存鞋'
					},
					{
						name: '洗鞋中'
					},
					{
						name: '待取鞋'
					}, {
						name: '已完成'
					}, {
						name: '售后'
					}
				],
				opentypes:1
			}
		},
		onLoad() {

			if (uni.getStorageSync('index')) {
				this.active = uni.getStorageSync('index') - 0
				uni.removeStorageSync('index')
			}
			// this.getOrderList()
			this.getOrderListNew()
			let that = this
			uni.$on('updateOrder', function(data) {
				console.log(data)
				that.active = data.index
				that.currentPage = 1
				that.orderList = []
				// that.getOrderList()
				that.getOrderListNew()
			})
		},
		onShow() {
			// this.orderList = []
			// this.getOrderList()
		},
		onReachBottom() {
			// if (this.currentPage < this.last_page) {
			// 	this.currentPage += 1;
			// 	this.getOrderList();
			// }
		},
		methods: {
			beforeSwitch(index) {
				console.log(index)
				if (index != 2) {
					return true
				} else {
					this.saoma()
					return false
				}
			},
			// 立即支付
			nowPay(order_id, paidAmount) {
				uni.navigateTo({
					url: './payment/payment?order_id=' + order_id + '&amount=' + paidAmount
				})
			},
			// 退款操作
			refund(id) {
				uni.navigateTo({
					url: './refund?id=' + id + '&type=tk' + '&index=1'
				})
			},
			goXq(id) {
				console.log(id, 'id')
				let type = ''
				switch (this.active) {
					case 0:
						type = 'dzf'
						break;
					case 1:
						type = 'dcx'
						break;
					case 2:
						type = 'xxz'
						break;
					case 3:
						type = 'dqx'
						break;
					case 4:
						type = 'ywc'
						break;
					case 5:
						type = 'sh'
						break;
				}
				uni.navigateTo({
					url: 'details/details?id=' + id + '&type=' + type + '&index=' + this.active
				})

			},
			openGuiMen(id, type,val) {
				this.guiziShow = true
				this.order_id = id
				this.openType = type
				this.opentypes = val
			},
			isOpenGuiZi() {
				let that = this
				this.guiziShow = false
				uni.showLoading({
					title: '柜子打开中。。。'
				})
				console.log(this.openType)
				if (this.openType == 'cun') {
					uni.$u.http.post('/device/open_cshoe', {
						id: this.$store.state.shoecabinet_id,
						order_id: this.order_id,
						opentype:this.opentypes
					}).then(res => {

						if (res.code == 200) {
							that.guiziChengGongShow = true
							that.num = res.data.info
							uni.hideLoading()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
						// console.log(res, '788')
					}).catch(err => {
						console.log(err, '00000000')
						uni.showToast({
							icon: 'none',
							title: err.data.msg
						})
					})
				} else if (this.openType == 'qu') {
					uni.$u.http.post('/device/open_save', {
						// id:this.$store.state.shoecabinet_id,
						order_id: this.order_id,
						opentype:this.opentypes
					}).then(res => {
						that.guiziChengGongShow = true
						that.num = res.data.info
						uni.hideLoading()
						console.log(res)
					}).catch(err => {
						console.log(err)
						uni.showToast({
							icon: 'none',
							title: err.data.msg
						})
					})
				}


			},
			clickTab(index) {
				this.currentPage = 1
				this.active = index
				this.orderList = []
				// this.getOrderList()
				this.getOrderListNew()
			},
			openGuiMenChengGong() {
				this.guiziChengGongShow = false
				this.orderList = []
				// this.getOrderList()
				this.getOrderListNew()
			},
			// 获取订单列表
			getOrderList() {
				uni.$u.http.post('/order/order_list', {
					page: this.currentPage,
					type: this.active
				}).then(res => {
					console.log(res)
					this.last_page = res.data.last_page
					this.currentPage = res.data.current_page
					this.orderList = [...this.orderList, ...res.data.data]
				})
			},
			// 获取订单列表 order/order_new_list
			getOrderListNew() {
				uni.$u.http.post('/order/order_new_list', {
					type: this.active
				}).then(res => {
					console.log(res)
					// this.last_page = res.data.last_page
					// this.currentPage = res.data.current_page
					this.orderList = res.data
				})
			},
			// 取消订单
			isCancel(order_id) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定取消订单吗',
					success: function(res) {
						if (res.confirm) {
							uni.$u.http.post('order/order_delete', {
								order_id: order_id
							}).then(res => {
								console.log(res)
								uni.showToast({
									icon: 'none',
									title: '取消成功'
								})
								that.orderList = []
								that.getOrderListNew()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			saoma() {
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

						let parames = that.queryURLParams(res.result)
						// console.log('参数->',that.queryURLParams(res.result))
						uni.navigateTo({
							url: '/pages/service/service?id=' + parames.id
						})
					}
				});
			},
			queryURLParams(url) {
				let pattern = /(\w+)=(\w+)/ig; //定义正则表达式
				let parames = {}; // 定义参数对象
				url.replace(pattern, ($, $1, $2) => {
					parames[$1] = $2;
				});
				return parames;
			},

		}
	}
</script>

<style lang="less">
	.order-tab {
		background: #FFFFFF;
		margin-top: 5rpx;
		padding: 0 31rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		height: 80rpx;

		.order-li {
			font-size: 28rpx;
			color: #333333;
		}

		.active {
			color: #FBAA27;
			font-weight: bold;
		}
	}

	.order-list {
		padding: 10rpx 20rpx;
		height: 100vh;

		.order-li {
			width: 100%;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			padding: 0 8rpx;
		}

		.order-li-no {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 82rpx;
			border-bottom: 2rpx solid #F7F7F9;

			view {
				font-size: 24rpx;
				color: #797979;
			}

			text {
				font-size: 24rpx;
				color: #FF9A33;
			}

			padding: 0 13rpx;
		}

		.order-li-xq-list {
			padding: 30rpx 12rpx;
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F7F7F9;
			position: relative;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.button-box {
				position: absolute;
				right: 0;
				bottom: 10rpx;
				font-size: 22rpx;
				display: flex;
			}

			button {
				margin: 0;
				margin-left: 30rpx;
				border-radius: 25rpx;
				border: 1px solid #999999;
				padding: 0 17rpx;
				line-height: 40rpx;

			}

			.btn1 {
				border: 1px solid #FF9A33;
				color: #FF9A33;
			}

			.order-li-xq-list-r {
				width: calc(100% - 160rpx);
				padding-left: 21rpx;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 13rpx;
				}

				.des {
					font-size: 24rpx;
					color: #7C7C7C;
					line-height: 30rpx;
					margin-bottom: 10rpx;
				}

				.price {
					font-size: 24rpx;
					color: #FBAA27;
					font-weight: bold;
				}
			}
		}

		.order-bottom {
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			button {
				margin: 0;
				margin-left: 30rpx;
				border-radius: 25rpx;
				border: 1px solid #999999;
				padding: 0 17rpx;
				line-height: 50rpx;
			}

			.btn1 {
				border: 1px solid #FF9A33;
				color: #FF9A33;
			}
		}
	}
</style>